<template>
  <div class="signIn-container">
    <el-row :gutter="40">
      <el-col :span="12">
        <div class="flex justifyBetween">
          <div class="flex dates alignCenter">
            <el-button type="primary" @click="getWeek('pre')" plain
              >上周</el-button
            >
            <div
              class="flex date alignCenter bold"
              style="color: #4196a2; font-size: 16px"
            >
              <div>{{ dates[0] }}</div>
              <span>～</span>
              <div>{{ dates[dates.length - 1] }}</div>
            </div>
            <el-button type="primary" @click="getWeek('next')" plain
              >下周</el-button
            >
          </div>
          <div
            class="primary"
            v-if="dates[0] != currentWeek[0]"
            @click="toCurrentWeek"
          >
            返回本周
          </div>
        </div>
        <div class="table">
          <el-table :data="[1]">
            <el-table-column
              prop="date"
              :label="item"
              v-for="(item, index) in week_exp"
              :key="index"
            >
              <template #default>
                {{ week_Format(item) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="title bold">未签到的排期</div>
        <el-table :data="noSignList" height="75" :show-header="false">
          <el-table-column type="index" />
          <el-table-column prop="date" label="排课日期" width="date" />
        </el-table>
      </el-col>
    </el-row>

    <el-table :data="tableData" class="listTable">
      <el-table-column prop="classIndex" label="排课节数" width="80">
        <template #default="scope"> 第{{ scope.row.classIndex }}节 </template>
      </el-table-column>
      <el-table-column prop="name" label="排课日期" width="160">
        <template #default="scope">
          {{ scope.row.date }}（{{ getWeekday(scope.row.date) }}）
        </template>
      </el-table-column>
      <el-table-column prop="address" label="上课时间" width="120">
        <template #default="scope">
          {{ scope.row.classStartTime }} - {{ scope.row.classEndTime }}
        </template>
      </el-table-column>
      <el-table-column prop="unitClassHours" label="课时" width="80" />
      <el-table-column prop="address" label="授课地点" width="250">
        <template #default="scope">
          <dictSelect
            readonly="1"
            v-model="scope.row.classAddress"
            dictCode="teaching_location"
          ></dictSelect>
        </template>
      </el-table-column>
      <el-table-column prop="teachingTeacher" label="授课老师" width="100">
        <template #default="scope">
          {{ scope.row.teachingTeacher || props.info.teachingTeacher }}
        </template>
      </el-table-column>
      <el-table-column
        prop="teachingContent"
        label="授课内容"
        width="400"
        show-overflow-tooltip
      />
      <el-table-column
        prop="address"
        label="关联课程"
        width="300"
        show-overflow-tooltip
      >
        <template #default="scope">
          <courseQuery
            v-model="scope.row.curriculumId"
            readonly="1"
          ></courseQuery>
        </template>
      </el-table-column>
      <el-table-column label="点名时间" width="200">
        <template #default="scope">
          {{ proxy.$utils.dateTimeFormateFn(scope.row.nameCallingTime, "all") }}
        </template>
      </el-table-column>
      <el-table-column prop="checkInStatus" label="签到情况">
        <template #default="scope">
          <div style="color: #c95b18">{{ scope.row.checkInStatus }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="signInRate" label="签到率">
        <template #default="scope">
          <div style="color: #c95b18">{{ scope.row.signInRate }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="班级老师">
        <template #default="scope">
          <accountSelect
            v-model="scope.row.classTeacherId"
            readonly="1"
          ></accountSelect>
        </template>
      </el-table-column>
      <el-table-column
        v-if="counter.isShowActionBtn(props.info)"
        prop="address"
        label="操作"
        width="110"
        align="center"
        fixed="right"
      >
        <template #default="scope">
          <el-button
            type="primary"
            :disabled="canAction(scope.row)"
            text
            @click="nameCallingClick(scope.row, scope.$index)"
            >{{ scope.row.signInComplete ? "查看详情" : "点名" }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="signIn-history">
      <div class="bold">历史签到记录</div>
      <el-table :data="signInHistory" class="listTable">
        <el-table-column prop="date" label="排课节数" width="80">
          <template #default="scope"> 第{{ scope.$index + 1 }}节 </template>
        </el-table-column>
        <el-table-column prop="name" label="排课日期" width="160">
          <template #default="scope">
            {{ scope.row.date }}（{{ getWeekday(scope.row.date) }}）
          </template>
        </el-table-column>
        <el-table-column prop="address" label="上课时间" width="120">
          <template #default="scope">
            {{ scope.row.classStartTime }} - {{ scope.row.classEndTime }}
          </template>
        </el-table-column>
        <el-table-column prop="unitClassHours" label="课时" width="80" />
        <el-table-column prop="address" label="授课地点" width="250">
          <template #default="scope">
            <dictSelect
              readonly="1"
              v-model="scope.row.classAddress"
              dictCode="teaching_location"
            ></dictSelect>
          </template>
        </el-table-column>
        <el-table-column prop="teachingTeacher" label="授课老师" width="100">
          <template #default="scope">
            {{ scope.row.teachingTeacher || props.info.teachingTeacher }}
          </template>
        </el-table-column>
        <el-table-column
          prop="teachingContent"
          label="授课内容"
          min-width="400"
          show-overflow-tooltip
        />
        <el-table-column label="点名时间" width="170">
          <template #default="scope">
            {{
              proxy.$utils.dateTimeFormateFn(scope.row.nameCallingTime, "all")
            }}
          </template>
        </el-table-column>
        <el-table-column prop="checkInStatus" label="签到情况">
          <template #default="scope">
            <div style="color: #c95b18">{{ scope.row.checkInStatus }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="signInRate" label="签到率">
          <template #default="scope">
            <div style="color: #c95b18">{{ scope.row.signInRate }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="班级老师">
          <template #default="scope">
            <accountSelect
              v-model="scope.row.classTeacherId"
              readonly="1"
            ></accountSelect>
          </template>
        </el-table-column>
        <el-table-column
          v-if="counter.isShowActionBtn(props.info)"
          prop="address"
          label="操作"
          width="110"
          align="center"
          fixed="right"
        >
          <template #default="scope">
            <el-button
              type="primary"
              :disabled="canAction(scope.row)"
              text
              @click="nameCallingClick(scope.row, scope.$index)"
              >{{ scope.row.signInComplete ? "查看详情" : "点名" }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <signInData ref="signInDataRef" @fatherMethod="getInfo"></signInData>
  </div>
</template>

<script setup lang="ts">
import signInData from "@/views/courseManage/components/signInData.vue";
const { proxy } = getCurrentInstance();
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
let props = defineProps(["info"]);

let dates = ref([]);
let week_exp = ref(["周一", "周二", "周三", "周四", "周五", "周六", "周日"]);
let tableData = ref([]);
let noSignList = ref([]); //未签到的排期
let signInHistory = ref([]); //历史签到记录

// 初始化一个新的Date对象，表示当前日期
let currentDate = new Date();
let currentWeek = computed(() => {
  let now = new Date();
  let arr = getDatesOfCurrentWeek(now);
  return arr;
});

function nameCallingClick(row, index) {
  if (!row.teachingTeacher) row.teachingTeacher = props.info.teachingTeacher;
  proxy.$refs.signInDataRef.open(row, index);
}

//获取历史签到记录
async function getHistory() {
  signInHistory.value = await proxy.$apis.classNameCalling({
    type: "signIn-history",
    data: { classId: props.info._id },
  });
  console.log("历史签到记录", signInHistory.value);
}

async function getNotSignedIn() {
  noSignList.value = await proxy.$apis.classNameCalling({
    type: "todayBeforeSignIn",
    data: { classId: props.info._id },
  });
  console.log("没有签到的", noSignList.value);
}

function canAction(params) {
  let date = proxy.$utils.getTimeFn(params.date);
  let now = proxy.$utils.getTimeFn();
  //已打卡完成
  if (params.signInComplete && params.signInComplete == 1) {
    return false;
  } else if (now < date) {
    //班次未开始
    return true;
  } else {
    return false;
  }
}

function toCurrentWeek() {
  currentDate = new Date();
  getInfo();
}

function week_Format(e) {
  for (let index = 0; index < dates.value.length; index++) {
    const element = dates.value[index];
    if (getWeekday(element) == e) {
      return new Date(element).getDate();
    }
  }
}

function getWeekday(date) {
  const weekdays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  const weekday = new Date(date).getDay();
  return weekdays[weekday];
}

function getWeek(type) {
  let date;
  if (type == "pre") {
    date = currentDate.setDate(currentDate.getDate() - 7);
  } else {
    date = currentDate.setDate(currentDate.getDate() + 7);
  }
  currentDate = new Date(date);
  getInfo();
}

//获取班级排期
async function getTeachingSchedule() {
  //班级排期
  let arr = await proxy.$apis.teachingScheduleData({
    type: "query",
    data: { classId: props.info._id },
  });
  if (arr && arr.length) currentDate = new Date(arr[arr.length - 1].date);
  getInfo();
}

async function getInfo() {
  dates.value = getDatesOfCurrentWeek(currentDate);
  let resp = await proxy.$apis.classNameCalling({
    type: "list",
    data: {
      classId: props.info._id,
      start: dates.value[0],
      end: dates.value[dates.value.length - 1],
    },
  });
  for (let index = 0; index < resp.length; index++) {
    const element = resp[index];
    element.classIndex = await proxy.$apis.teachingScheduleData({
      type: "queryLessonNum",
      data: { classId: props.info._id, _id: element._id },
    });
  }
  tableData.value = resp;
}
function getDatesOfCurrentWeek(date) {
  let current = new Date(date);
  let dayOfWeek = current.getDay() || 7; // 使周日的值为7
  let start = current.getDate() - dayOfWeek + 1; // 计算周一的日期
  let dates = [];

  for (let i = 0; i < 7; i++) {
    let date = new Date(current);
    date.setDate(start + i);
    dates.push(proxy.$utils.dateTimeFormateFn(new Date(date)));
  }
  return dates;
}

watch(
  () => props.info,
  (newValue, oldValue) => {
    if (newValue) {
      getTeachingSchedule();
      //getInfo();
      getNotSignedIn();
      getHistory();
    }
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.dates {
  font-size: 15px;
  .date {
    margin: 0 20px;
    span {
      padding: 0 10px;
    }
  }
  .action {
    cursor: pointer;
  }
}
.primary {
  color: var(--el-color-primary);
  cursor: pointer;
  font-size: 15px;
}
.table {
  width: 600px;
  margin: 15px 0 0;
}
.listTable {
  margin-top: 25px;
}
.title {
  color: #4196a2;
  margin-bottom: 15px;
}
.signIn-history {
  margin-top: 25px;
}
</style>
